<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String list = (String) request.getAttribute("list");
String list1 = (String) request.getAttribute("list1");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>交易大厅｜第一数字资产交易平台</title>   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	 <link rel="shortcut icon" href="<%=basePath%>asset/ico/favicon.png">
	<link rel="stylesheet" href="<%=basePath%>asset/css/bootstrap.min.css">  
   <link href="<%=basePath%>asset/css/codemirror.css" rel="stylesheet">
    <link href="<%=basePath%>asset/css/monokai.css" rel="stylesheet">


    <link href="<%=basePath%>asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basePath%>asset/css/bootstrap.css" rel="stylesheet">
    <link href="<%=basePath%>asset/css/carousel.css" rel="stylesheet">
  
    <script src="<%=basePath%>asset/js/codemirror.js"></script>
    <script src="<%=basePath%>asset/js/javascript.js"></script>

 
   <script src="<%=basePath%>jsp/echart/js/echarts.js"></script>
   
</head>

<body>


    <!-- Fixed navbar -->

<div class="m_boxa clearfix">

  <div id="graphic" class="col-md-8">
                <div id="main" class="main"  style="width: 100%; height: 300px;"></div>
                <div>
                    <!-- <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button> -->
                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
	 
 
</div>
   
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<%=basePath%>asset/js/jquery.min.js"></script>
	
	
    <script src="<%=basePath%>asset/js/bootstrap.min.js"></script>
  <script >  
 

  var  _v=JSON.parse('<%=list1%>')
var  _v2=JSON.parse('<%=list%>')
  console.log('<%=list%>');
var option = {
    title : {
        text: '商品交易指数'
    },
    tooltip : {
        trigger: 'axis',
        formatter: function (params) {
            var res = params[0].seriesName + ' ' + params[0].name;
            res += '<br/>  开盘 : ' + params[0].value[0] + '  最高 : ' + params[0].value[3];
            res += '<br/>  收盘 : ' + params[0].value[1] + '  最低 : ' + params[0].value[2];
            return res;
        }
    },
    legend: {
        data:['交易指数']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime: true,
        start : 50,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            axisTick: {onGap:false},
            splitLine: {show:false},
            data : _v
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            boundaryGap: [0.01, 0.01]
        }
    ],
    series : [
        {
            name:'交易指数',
            type:'k',
            //select day,min(开盘),min(收盘),min(最低),max(最高) from mmtable group by day order by day
            data:_v2
        }
    ]
};  
   
var curTheme='macarons';
var myChart;
var domCode = document.getElementById('sidebar-code');
var domGraphic = document.getElementById('graphic');
var domMain = document.getElementById('main');
var domMessage = document.getElementById('wrong-message');
var iconResize = document.getElementById('icon-resize');
var needRefresh = false;
function focusGraphic() {
    domCode.className = 'col-md-4 ani';
    domGraphic.className = 'col-md-8 ani';
    if (needRefresh) {
        myChart.showLoading();
        setTimeout(refresh, 1000);
    }
}

function autoResize() {
    if ($(iconResize).hasClass('glyphicon-resize-full')) {
        focusCode();
        iconResize.className = 'glyphicon glyphicon-resize-small';
    }
    else {
        focusGraphic();
        iconResize.className = 'glyphicon glyphicon-resize-full';
    }
} 

function refresh(isBtnRefresh){
    if (isBtnRefresh) {
        needRefresh = true;
        focusGraphic();
        return;
    }
    needRefresh = false;
    if (myChart && myChart.dispose) {
        myChart.dispose();
    }
    myChart = echarts.init(domMain, curTheme);
    window.onresize = myChart.resize;
  //  console.log(editor.doc.getValue())
   // (new Function(editor.doc.getValue()))();
    myChart.setOption(option, true)
    domMessage.innerHTML = '';
}

/*   function needMap() {
    var href = location.href;
    return href.indexOf('map') != -1
           || href.indexOf('mix3') != -1
           || href.indexOf('mix5') != -1
           || href.indexOf('dataRange') != -1;

} */

var echarts;

    // for echarts online home page
require.config({
    paths: {
        echarts: './js'
    }
});
    launchExample();
    function 
			requireCallback(ec, defaultTheme) {

				echarts = ec;
				refresh();
				window.onresize = myChart.resize;
			}

			var isExampleLaunched;
			function launchExample() {
				if (isExampleLaunched) {
					return;
				}

				// 按需加载
				isExampleLaunched = 1;
				require([ 'echarts', 'theme/macarons', // + hash.replace('-en', ''),
				'echarts/chart/line', 'echarts/chart/bar',
						'echarts/chart/scatter', 'echarts/chart/k',
						'echarts/chart/pie', 'echarts/chart/radar',
						'echarts/chart/force', 'echarts/chart/chord',
						'echarts/chart/gauge', 'echarts/chart/funnel',
						'echarts/chart/eventRiver', 'echarts/chart/venn',
						'echarts/chart/treemap', 'echarts/chart/tree',
						'echarts/chart/wordCloud', 'echarts/chart/heatmap',
				//needMap() ? 'echarts/chart/map' : 'echarts'
				], requireCallback);
			}
		</script>
       
</body>
</html>
